<template>
  <div>
    <customDialog
      :title="`${title}`"
      :dialogVisible="dialogVisible"
      @close="closeDialog(ruleFormRef)"
      @confirm="confirmDialog(ruleFormRef)"
      width="650"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="formData"
          :rules="rules"
          label-position="left"
          label-width="120px"
          class="form_box"
        >
          <el-row>
            <el-col :span="16">
              <el-form-item label="小程序AppId" prop="appId">
                <el-input
                  v-model="formData.appId"
                  placeholder="请输入小程序ID"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="小程序原始Id" prop="appGhId">
                <el-input
                  v-model="formData.appGhId"
                  placeholder="请输入小程序原始Id"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="小程序名称" prop="appName">
                <el-input
                  v-model="formData.appName"
                  placeholder="请输入小程序名称"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="小程序类型" prop="appType">
                <el-select v-model="formData.appType" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in appsTypeOption"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="小程序秘钥" prop="secret">
                <el-input
                  v-model="formData.secret"
                  placeholder="请输入小程序秘钥"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="小程序首页路径" prop="pathIndex">
                <el-input
                  v-model="formData.pathIndex"
                  placeholder="请输入小程序首页路径"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import defaultTemplate from "@/components/DefaultRechargeTemlate/defaultTemlate.vue";
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { appsAdd, appsEdit } from "@/api/globalManage/appletRoute/index";
import type { FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";

const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const form = {
  id: 0,
  appId: "",
  appGhId: "",
  appType: "wx",
  appName: "",
  secret: "",
  pathIndex: "",
};
const formData = ref(Object.assign({}, form));

const title = ref<string>("");

// 剧集
const appsTypeOption = ref([
  { label: "微信小程序", value: "wx" },
  // { label: "抖音小程序", value: 'dy' },
  // { label: "快手小程序", value: 'ks' },
]);

const rules = reactive({
  appId: [{ required: true, message: "请输入小程序ID", trigger: "blur" }],
  appGhId: [
    { required: true, message: "请输入小程序原始ID", trigger: "change" },
  ],
  appType: [{ required: true, message: "请选择小程序类型", trigger: "change" }],
  appName: [{ required: true, message: "请输入小程序名称", trigger: "change" }],
  secret: [{ required: true, message: "请输入小程序密钥", trigger: "change" }],
  pathIndex: [
    { required: true, message: "请输入小程序首页路径", trigger: "change" },
  ],
});

const defaultTemplateRef = ref();

// 关闭
const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl?.resetFields();
  Object.assign(formData.value, form);
  dialogVisible.value = false;
};

// 成功
const emit = defineEmits(["success"]);
const confirmDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let URL;
      if (title.value != "新增小程序") {
        URL = appsEdit;
      } else {
        URL = appsAdd;
      }
      URL(formData.value).then((res: Record<string, any>) => {
        ElMessage.success(
          `${title.value != "新增小程序" ? "编辑" : "新增"}成功`
        );
        dialogVisible.value = false;
        emit("success");
      });
    }
  });
};

// 父级电子显示dialog
const showDialog = (val: any) => {
  console.log(111, val);
  dialogVisible.value = true;
  title.value = val ? `编辑小程序-${val?.appName}` : "新增小程序";
  if (val) formData.value = cloneDeep(val);
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.form_box {
  padding: 0 20px;
}
</style>
